<div id="app">
  姓：<input type="text" v-model="firstName"> +
  名：<input type="text" v-model="lastName"> = {{fullName}}
  <span></span><br><br> 
  <button @click="changeName">改名卡</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: '刘',
      lastName: '备',
      a: '111'
    },
    computed: {
      // 全量写法  计算属性名: {set(参数) {}, get() {} }
      fullName: {
        // 使用计算属性时候都是通过get方法取到值
        // 计算属性想要变化必须 依赖属性变化才行
        get() {
          return this.firstName + this.lastName
        },
        // set方法是能拿到直接给fullName赋的值
        set (name) {
          console.log(name);
          // 把第一个字符赋值给firstName  第二个字符 赋值给lastName
          this.firstName = name.slice(0,1)
          this.lastName = name.slice(1)
          // this.firstName = '老韩'
        }
      }   
    },
    methods: {
      changeName() {
        // 计算属性能通过set拿到这个黄忠字符串  但是没有变化
        this.fullName = '黄忠'
        // 属性赋值  值会直接改变   计算属性赋值不会改变
        this.a = '222'
      },
      test() {
        this.fullName = '赵云'
      }
    }
  })
</script>